<template>
  <div class="app-container">
    <el-col :span="24" class="selectform">
      <el-form :model="selectform">
        <el-col :span="5" style="padding-right:10px">
          <el-form-item label="报修时间" label-width="70px">
            <el-date-picker v-model="selectform.baoxui" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="padding-right:5px">
          <el-form-item>
            <el-select v-model="selectform.search_type_user" placeholder="请选择" clearable>
              <el-option label="客户姓名" value="0">
              </el-option>
              <el-option label="电话" value="1">
              </el-option>
              <el-option label="微信号" value="2">
              </el-option>
              <el-option label="帐号" value="3">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-input v-model.trim="selectform.search_value_user" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="padding-left:10px">
          <el-form-item label="售后" label-width="40px">
            <el-select v-model="selectform.customer_uid" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in customers" :label="item.u_name" :value="item.uid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="padding-left:10px">
          <el-form-item label="问题属性" label-width="70px">
            <el-select v-model="selectform.iswork" placeholder="请选择" clearable>
              <el-option label="全部" value="-1">
              </el-option>
              <el-option label="非生产原因" value="0">
              </el-option>
              <el-option label="生产原因" value="1">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="padding-left:10px">
          <el-form-item label="报修大类" label-width="70px">
            <el-cascader clearable placeholder="请选择报修类型" v-model="selectform.repair_type_list" :options="typedata" :props="propstype"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="padding-left:10px;padding-right:10px;">
          <el-form-item>
            <el-select v-model="selectform.search_type_id" clearable>

              <el-option label="机器名称" value="2">
              </el-option>
              <el-option label="机器SN" value="3">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="padding-right:10px;">
          <el-form-item>
            <el-input v-model.trim="selectform.search_value_id" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="search()">查询</el-button>
        </el-col>
      </el-form>
    </el-col>
    <el-col :span="24" class="datatable">
      <el-table element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" :data="list" element-loading-text="加载中···" highlight-current-row :header-cell-style="table_row_style" :cell-style="{padding:'0px!important',background: 'revert',border:'0'}" width="100%">
        <!-- 424 25.5421% -->
        <el-table-column align="center" min-width="15%" fixed :resizable="true" label="报修信息">
          <template slot-scope="scope">
            <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-1">客户<br />姓名</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_user_name}}</span></td>
                <td class="table-inner-box-label in-co-1">报修时间</td>
                <td class="table-inner-box-content"><span>{{formatdate(scope.row.repair_addtime)}}</span></td>

              </tr>
              <tr>
                <td class="table-inner-box-label in-co-1">客户帐号</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_user_loginname}}</span></td>
                <td class="table-inner-box-label in-co-1">售后</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_customer_uname}}</span></td>
              </tr>

            </table>
            <div class="black-line"></div>
          </template>
        </el-table-column>
        <!-- 135 8.1325%-->
        <el-table-column align="center" min-width="25.5421%" fixed :resizable="true" label="机器信息">
          <template slot-scope="scope">
            <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-2">报修大类</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_type}}</span></td>
                <td class="table-inner-box-label in-co-2">处理状态</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_handle_state_str}}</span></td>
                <td class="table-inner-box-label in-co-2" style="width:22px;" >问题描述</td>
                <td class="table-inner-box-content" >
                  <el-tooltip class="item" effect="dark" v-if="scope.row.repair_repair_des != null &&scope.row.repair_repair_des.length>=20" :content="scope.row.repair_repair_des" placement="top-start">
                    <span>
                      {{ scope.row.repair_repair_des.substring(0,26) + '...'}}
                    </span>
                  </el-tooltip>
                  <span v-else> {{ scope.row.repair_repair_des}}</span>
                </td>
              </tr>
              <tr>
                <td class="table-inner-box-label in-co-2">问题属性</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_iswork_str}}</span></td>
                <td class="table-inner-box-label in-co-2">审批模式</td>
                <td class="table-inner-box-content"><span>{{scope.row.repair_approval_model_str}}</span></td>
                <td class="table-inner-box-label in-co-2" style="width:22px;" >处理结果</td>
                <td class="table-inner-box-content" >
                  <el-tooltip class="item" effect="dark" v-if="scope.row.repair_technology_repair_handle_result != null &&scope.row.repair_technology_repair_handle_result.length>=20" :content="scope.row.repair_technology_repair_handle_result" placement="top-start">
                    <span>
                      {{ scope.row.repair_technology_repair_handle_result.substring(0,26) + '...'}}
                    </span>
                  </el-tooltip>
                  <span v-else> {{ scope.row.repair_technology_repair_handle_result}}</span>
                </td>
              </tr>

            </table>
            <div class="black-line"></div>
          </template>
        </el-table-column>
        <!-- 136 8.1927%-->
        <el-table-column align="center" min-width="20%" fixed :resizable="true" label="时间信息">
          <template slot-scope="scope">
            <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-label in-co-3">机器名称</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_name}}</span></td>
                <td class="table-inner-box-label in-co-3">机器型号</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_kid_type}}</span></td>
                <td class="table-inner-box-label in-co-3">质保时间</td>
                <td class="table-inner-box-content"><span>{{formatdate(scope.row.mch_assurance_sdt)}}</span></td>
              </tr>
              <tr>
                <td class="table-inner-box-label in-co-3">机器SN</td>
                <td class="table-inner-box-content"><span>{{scope.row.mch_sn}}</span></td>
                <td class="table-inner-box-label in-co-3">发货时间</td>
                <td class="table-inner-box-content"><span>{{formatdate(scope.row.mch_send_time)}}</span></td>
                <td class="table-inner-box-label in-co-3">确认时间</td>
                <td class="table-inner-box-content"><span>{{formatdate(scope.row.mch_confirm_time)}}</span></td>
              </tr>

            </table>
            <div class="black-line"></div>
          </template>
        </el-table-column>

        <!-- 133 8.012%-->
        <el-table-column align="center" min-width="8.012%" fixed :resizable="true" label="操作">
          <template slot-scope="scope">
            <table :class="scope.$index % 2 !=0? 'inner-table even-numbers-color':'inner-table'">
              <tr>
                <td class="table-inner-box-content" style="height:91px"><span>
                    <el-button type="primary" size="mini" @click="xiangqingdia(scope.row)">物料详情</el-button>
                  </span></td>
              </tr>
              <tr>
                <td class="table-inner-box-content lastcontent">
                  <el-row>

                  </el-row>
                  <el-row>
                    <el-button type="primary" size="mini" @click="photodia(scope.row)">照片</el-button>
                  </el-row>
                </td>
              </tr>
            </table>
            <div class="black-line"></div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center" layout="prev, pager, next" small :current-page="selectform.current" :page-size="selectform.pagesize" :total="selectform.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-col>
    <el-dialog title="物料详情" :visible.sync="xiangqingdiavis" width="95%" :before-close="handleClose">
      <el-col :span="24" class="datatable2">
        <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="leftlistLoading" :data="list2" highlight-current-row border fit element-loading-text="加载中···">
          <!-- <el-table-column type="index" width="40"></el-table-column> -->
          <el-table-column align="center" label="寄件状态">
            <template slot-scope="scope">
              {{ scope.row.repair_express_state_str }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="寄件时间">
            <template slot-scope="scope">
              {{ scope.row.repair_express_time }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="寄件单号">
            <template slot-scope="scope">
              {{ scope.row.repair_express_no }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="物料名称">
            <template slot-scope="scope">
              {{ scope.row.parts_materiel_name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="物料规格">
            <template slot-scope="scope">
              {{ scope.row.parts_materiel_specifications }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="物料数量">
            <template slot-scope="scope">
              {{ scope.row.parts_count}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="返件时间">
            <template slot-scope="scope">
              {{ scope.row.return_addtime }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="返件单号">
            <template slot-scope="scope">
              {{ scope.row.return_express_no }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="到件时间">
            <template slot-scope="scope">
              {{ scope.row.parts_return_express_receive_time }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="检测时间">
            <template slot-scope="scope">
              {{ scope.row.check_time }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="检测结果">
            <template slot-scope="scope">
              {{ scope.row.check_result_str}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="检测说明">
            <template slot-scope="scope">
              {{ scope.row.check_des }}
            </template>
          </el-table-column>
        </el-table>

      </el-col>
      <div style="clear:both;"></div>
    </el-dialog>
    <el-dialog title="查看照片" :visible.sync="photodiavis" width="900px">
      <div class="el-dialog-div">
        <div class="reko-image-div">
          <div>报修照片</div>
          <el-image style="width: 75px; height:75px; padding-left:2%; float:left;" lazy v-for="(item,index) in photolist.repair_des_pic" :key="index" :src="item" :preview-src-list="photolist.repair_des_pic">
          </el-image>
        </div>
        <div class="reko-image-div">
          <div>不同意返件照片</div>
          <el-image style="width: 75px; height:75px; padding-left:2%;float:left;" lazy v-for="(item,index) in photolist.return_pic" :key="index" :src="item" :preview-src-list="photolist.return_pic">
          </el-image>
        </div>
        <div style="clear:both;"></div>
        <div class="reko-image-div">
          <div>超保审批照片</div>
          <el-image style="width: 75px; height:75px; padding-left:2%;float:left;" lazy v-for="(item,index) in photolist.repair_transfer_screenshot" :key="index" :src="item" :preview-src-list="photolist.repair_transfer_screenshot">
          </el-image>
        </div>
        <div class="reko-image-div">
          <div>检测照片</div>
          <el-image style="width: 75px; height:75px; padding-left:2%;float:left;" lazy v-for="(item,index) in photolist.check_images" :key="index" :src="item" :preview-src-list="photolist.check_images">
          </el-image>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="photodiavis = false">关闭</el-button>
      </div>

      <div style="clear:both"></div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectform: {
          baoxui: [],
          "isPage": true,
          "page": 1,
          "pagesize": 10,
          "issale": true,
          "serchKeyword": "",
          "repair_date_start": "",
          "repair_date_end": "",
          "search_type_user": "0",
          "search_value_user": "",
          "customer_uid": "",
          "iswork": "-1",
          "repair_type": "",
          "repair_kid_type": "",
          "search_type_id": "2",
          "search_value_id": "",
          current: 1,
          total: 1,
          repair_type_list: [],
        },
        list: [{}],
        Loading: false,
        leftlistLoading: false,
        xiangqingdiavis: false,
        typedata: '', //报修类型
        propstype: {
          value: "label",
          label: "label",
          children: "children"
        },
        customers: [], //售后列表
        list2: [],
        photodiavis: false,
        photolist: {
          repair_des_pic: [],
          repair_transfer_screenshot: [],
          return_pic: [],
          check_images: [],
        },
      }
    },
    created() {
      this.gettype()
      this.getcustomer()
      this.search(true)
    },
    methods: {
      table_row_style(row) { //表格行样式
        switch (row.columnIndex)
        {
        case 0:
          return "color: #FFFFFF;background:#1CC2A5";
        case 1:
          return "color: #FFFFFF;background:#409EFF";
        case 2:
          return "color: #FFFFFF;background:#E4B163";
        case 3:
          return "color: #FFFFFF;background:#EF8A8A";
        case 4:
          //return "color: #FFFFFF;background:#9747FF";
          return "color: #FFFFFF;background:#24BCD1";
        case 5:
          return "color: #FFFFFF;background:#E72C27";
        case 6:
          return "color: #FFFFFF;background:#24BCD1";
        }
      },
      xiangqingdia(one) { //查看详情
        this.xiangqingdiavis = true
        this.getwuliao(one.repair_mission_id)
      },
      search(type) {
        this.Loading = true
        if (type == true) {
          this.selectform.page = 1
        }
        this.selectform.repair_type = this.selectform.repair_type_list[0]
        this.selectform.repair_kid_type = this.selectform.repair_type_list[1]
        this.selectform.repair_date_start = this.selectform.baoxui[0]
        this.selectform.repair_date_end = this.selectform.baoxui[1]
        let {...postselectform} = this.selectform
        if (postselectform.iswork == -1){
          postselectform.iswork = null
        }
        this.$post(this.$api + '/repair/search_repair_parts_send_return_census_list_v2', postselectform).then((e) => {
          if (e.code == 0) {
            this.list = e.rows
            this.selectform.current = e.current
            this.selectform.total = e.total
          }
          else
          {
            this.$notify({
              title: '失败',
              message: e.msg,
              type: 'error'
            });
          }
          this.Loading = false
        })
      },
      gettype() { //获取报修类型
        this.$get(this.$api + '/repair/get_type')
          .then((res) => {
            if (res.code === 0) {
              this.typedata = res.data

            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      },
      getcustomer() { //获取售后
        this.$get(this.$api + '/repair/get_customer_userlist', {
            'lv': 'customer',
          })
          .then((res) => {
            if (res.code === 0) {
              this.customers = res.data
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      },
      getwuliao(orderid) { //根据id获取物料详情
        this.$get(this.$api + '/repair/search_repair_parts_send_return_census_list_v2_repair_parts?repair_mission_id=' + orderid).then((e) => {
          this.leftlistLoading = true
          if (e.code == 0) {
            this.list2 = e.data
          }
          else
          {
            this.$notify({
              title: '失败',
              message: e.msg,
              type: 'error'
            });
          }
          this.leftlistLoading = false
        })
      },
      photodia(one) {
        this.photodiavis = true
        this.getphotolist(one.repair_mission_id)
      },
      getphotolist(orderid) {
        this.$get(this.$api + '/repair/search_repair_parts_send_return_census_list_v2_pic?repair_mission_id=' + orderid).then((e) => {
          if (e.code == 0) {
            this.photolist = e.data
          }
          else
          {
            this.$notify({
              title: '失败',
              message: e.msg,
              type: 'error'
            });
          }
        })
      },
      handleClose() {
        this.xiangqingdiavis = false
      },
      handleSizeChange(v) {
        this.selectform.pagesize = v;
        this.search()
      },
      handleCurrentChange(v) {
        this.selectform.page = v;
        this.search()
      },
      formatdate(settime){//格式化时间
        if (settime == null || settime == ''){
          return ''
        }
        var setdate = new Date(settime)
        return setdate.getFullYear()+"-"+(setdate.getMonth()+1)+'-'+setdate.getDate()
      }
    }
  }
</script>
<style scoped>
  /deep/.el-date-editor .el-range-separator {
    padding: 0px;
    width: 7%;
  }
  /deep/ .el-table .cell, .el-table th div{
    padding: 0px !important;
  }
  .table-inner-box-label {
    width: 32px;
    font-size: 10px;
    padding: 0 !important;
    overflow: hidden;
  }

  .table-inner-box-content {
    font-size: 12px;
    border-bottom: 1px solid #CCC;
    padding: 0 !important;
    overflow: hidden;
  }

  .table-inner-box-content-nospan {
    font-size: 12px;
    border-bottom: 1px solid #CCC;
    padding: 0 !important;
    overflow: hidden;
  }

  .table-inner-box-content span {
    width: 100px;
    height: 50px;
    overflow: hidden;
  }

  .inner-table {
    border: 0;
    width: 100%;
    height: 190px;
    table-layout: fixed;
    top: 0;
  }

  .inner-table td {
    padding: 0 !important;
  }


  .lastcontent {
    border-bottom: 0px !important;
  }

  .in-co-1 {
    background: #1CC2A5;
    color: white;
  }

  .in-co-2 {
    color: #FFFFFF;
    background: #409EFF
  }

  .in-co-3 {
    color: #FFFFFF;
    background: #E4B163
  }

  .in-co-4 {
    color: #FFFFFF;
    background: #EF8A8A
  }

  .in-co-5 {
    color: #FFFFFF;
    background: #9747FF
  }

  .in-co-6 {
    color: #FFFFFF;
    background: #E72C27
  }

  .in-co-7 {
    color: #FFFFFF;
    background: #24BCD1
  }

  .black-line {
    width: 100%;
    height: 2px;
    background: #99a9bf;
    bottom: 0;
    position: absolute;
  }

  .reko-image-div {
    padding: 2%;
    font-size: 14px;
    font-weight: 900;
    float: left;
    width: 100%;
    height: 100px;
  }
</style>